<template>
    <div class="title">vuex使用</div>
    <div>名字：{{ name }}</div>
    <button @click="getName">获取名字</button>
    <button @click="setName">改变名字</button>
    <component :is="someCom ? Bar : Foo" />
    <button @click="changeCom">改变组件</button>
</template>

<script lang="ts" setup>
    import { useStore, key } from '../../store'
    import { defineComponent, onMounted, computed, watch, ref } from 'vue'
    import Foo from './Foo.vue'
    import Bar from './Bar.vue'
    //$data
    const $store = useStore()
    const name = computed(() => $store.getters.getName)
    const someCom = ref<boolean>(false)

    watch(name, (val, old) => {
        console.log('变化了', name.value)
    })
    //$menthes
    const getName = () => {
        console.log('$store :>> ', $store.getters.getName)
    }
    const setName = () => {
        $store.commit('SET_USERNAME', '李四')
    }
    const changeCom = () => {
        someCom.value = !someCom.value
    }
</script>
<style scoped lang="less">
    .title {
        color: @color;
    }
</style>
